import React, {Component} from 'react'
import {Button, Col, Form, Row, Space, Switch, Table} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import PaginationComponent from '../common/paginationComponent'
import commonConfig from '../../static/js/commonConfig'
import {RealNameComponent, RoleComponent, UnitComponent} from '../common/component'

/* eslint-disable */

class UserManagement extends Component {
    state = {
        pageNumber: 1,
        pageSize: 10,
        totalRow: 0,
        unitList: [],
        roleList: [],
        dataSource: [],
        auditStatusList: [
            {name: '待审核', value: '0'},
            {name: '通过', value: '1'},
            {name: '不通过', value: '2'}
        ],
        auditStatus: 0,
        auditModalVisible: false,
        userId: '',
        roleId: '',
        modelVisible: false,
        modalTitle: '',
        departmentList: [],
        userList: [],
        checkUserList: [],
        selectedRowKeys: [],
        wChartId: null,
        unitName: ''
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    /*获取用户列表*/
    getUserList = () => {
    }

    /*重置筛选条件*/
    resetFormHandle = () => {
    }

    /*分页操作事件*/
    pageChangeHandle = (pageNumber, pageSize) => {
    }

    /*启用禁用用户操作按钮*/
    switchHandle = (item) => {
    }

    /*新增用户*/
    addUserHandle = () => {
    }
    /*修改用户*/
    editUserHandle = item => {
    }


    editUser = (values, userId) => {
    }


    /*审核用户*/
    auditUserHandle = item => {
    }


    /*删除用户*/
    deleteUserHandle = item => {
     
    }

    /*重置用户*/
    resetUser = item => {
     
    }

    render() {
        const {
            pageNumber, pageSize, totalRow, unitList, dataSource, auditStatusList, roleList, 
        } = this.state;
        const pageProps = {
            pageNumber, pageSize, totalRow, pageChangeHandle: this.pageChangeHandle
        }
        const columns = [
            {title: '序号', dataIndex: 'key', key: 'key', align: 'center'},
            {title: '用户名', dataIndex: 'accunt', key: 'accunt', align: 'center'},
            {title: '姓名', dataIndex: 'realName', key: 'realName', align: 'center'},
            {title: '手机号', dataIndex: 'mobile', key: 'mobile', align: 'center'},
            {title: '所属单位', dataIndex: 'unitName', key: 'unitName', align: 'center'},
            {title: '用户角色', dataIndex: 'roleName', key: 'roleName', align: 'center'},
            {
                title: '审核状态', dataIndex: 'verifyStatus', key: 'verifyStatus', align: 'center', render: text => {
                    let status = commonConfig.getJsonValueByName(auditStatusList, text);
                    return status === '未通过' ? <span style={{color: '#DE0000'}}>{status}</span> : status;
                }
            },
            {
                title: '启用状态', dataIndex: 'enableStatus', key: 'enableStatus', align: 'center',
                render: (text, record) => {
                    return <Switch checkedChildren="启用" unCheckedChildren="禁用" checked={text === '1'}
                                   onClick={this.switchHandle.bind(this, record)}/>
                }
            },
            {
                title: '操作', dataIndex: 'operate', key: 'operate', align: 'center', width: 230,
                render: (text, record) => {
                    return <div className="operate_link_group">
                        <span className="edit_link" onClick={this.editUserHandle.bind(this, record)}>编辑</span>
                        <span className="audit_link" onClick={this.auditUserHandle.bind(this, record)}>审核</span>
                        <span className="del_link" onClick={this.deleteUserHandle.bind(this, record)}>删除</span>
                        <span className="reset_link" onClick={this.resetUser.bind(this, record)}>重置</span>
                    </div>
                }
            }
        ]
        const tableProps = {
            dataSource,
            columns,
            pagination: false
        }

        return (
            <>
                <div className="system_management_content_style animate__animated animate__fadeIn">
                    <Row className="filter_section">
                        <Col span={2} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">条件查询</span>
                        </Col>
                        <Col span={22} className="filter_search">
                            <Row className="custom_filter_form_style">
                                <Col span={18} className="animate__animated animate__fadeInDown">
                                    <Form ref="filterRef" layout="inline" autoComplete="off"
                                          initialValues={{realName: '', workunitId: '', roleId: ''}}>
                                        {RealNameComponent()}
                                        {UnitComponent(unitList, () => this.getUserList(), '单位名称')}
                                        {RoleComponent(roleList, () => this.getUserList(), '用户角色')}
                                    </Form>
                                </Col>
                                <Col span={6} className="clearFix animate__animated animate__fadeInRight">
                                    <Space size={30} className="float-right">
                                        <Button type="primary" className="custom_button_style search_result"
                                                onClick={this.getUserList}>搜索</Button>
                                        <Button type="primary" className="custom_button_style"
                                                onClick={this.resetFormHandle}>重置</Button>
                                    </Space>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="filter_section">
                        <Col span={16} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">用户列表</span>
                        </Col>
                        <Col span={8} className="clearFix animate__animated animate__fadeInRight">
                            <Space size={30} className="float-right">
                                <Button type="primary" className="custom_button_style remove_all auto_width"
                                        icon={<PlusOutlined/>} onClick={this.addUserHandle}>新增用户</Button>
                               
                            </Space>
                        </Col>
                    </Row>
                    <div className="table_box animateFadeInUp">
                        <Table className="custom_table_style" {...tableProps}/>
                        <PaginationComponent {...pageProps}/>
                    </div>
                </div>
            </>
        )
    }
}

export default UserManagement